import { findByPCateId } from '../../../../api/base'
import { getPersonalInfoFull } from '../../../../api/user'
const app = getApp()

Component({
  properties: {
    title: {
      type: String,
      value: ''
    },
    url: {
      type: String,
      value: ''
    },
    params: {
      type: String,
      value: ''
    },
    condition: {
      type: Boolean,
      value: false
    },
    direction: {
      type: String,
      value: 'down'
    },
    tranlateX: {
      type: String,
      value: '0px'
    }
  },

  options: {
    styleIsolation: 'shared'
  },

  lifetimes: {
    attached: function() {
      if (this.data.condition) {
        this.init()
      }
    }
  },
  attached: function() {
    if (this.data.condition) {
      this.init()
    }
  },
  data: {
    menuTitle: '学段',
    menuActiveIndex: 0,
    menus: [],
    menuActive: '',
    options: [],
    tabActiveIndex: 0,
    tabActive: '',
    tabs: [],
    activeId: 1,
    showCondition: false,
    popupTop: 0,
    phaseId: '',
    subjectId: ''
  },
  methods: {
    async init() {
      if (app.globalData.token || wx.getStorageSync('token')) {
        const info = await  getPersonalInfoFull()
        this.setData({
          phaseId: info.phase.length?info.phase[0].itemCode:'',
          subjectId: info.subjects.length?info.subjects[0].subjectId:''
        })
        // console.log(info, 'getpersonalinfofull')
        // this.getConditionBottom()
        this.getMenus()
      } else {
        // this.getConditionBottom()
        this.getMenus()
      }
    },
    getConditionBottom() {
      const query = this.createSelectorQuery();
      query.select('.condition-selected').boundingClientRect();
      query.exec((res) => {
        console.log(res[0].bottom)
        this.setData({
          popupTop: res[0].bottom - 64 - 90
        })
      })
    },
    getMenus(id) {
      const _this = this
      // 获取菜单列表
      this.getCate(id).then(res => {
        if (res.categoryVoList.length) {
          res.categoryVoList.forEach(cate => {
            cate.text = cate.itemName;
            cate.id = cate.cateId;
          })
          _this.setData({
            menus: res.categoryVoList
          })
          let activeIndex = 0;
          // 获取二级菜单标签
          _this.getCate(res.categoryVoList[0].cateId).then(subRes => {
            if (subRes.categoryVoList && subRes.categoryVoList.length) {
              if (!this.data.phaseId) {
                subRes.categoryVoList[0].isChecked = true
              } else {
                subRes.categoryVoList.forEach((cate, index) => {
                  cate.text = cate.itemName;
                  cate.id = cate.cateId;
                  if (_this.data.phaseId === cate.itemCode) {
                    _this.setData({ menuTitle: cate.itemName })
                    cate.isChecked = true;
                    activeIndex = index
                  } else {
                    cate.isChecked = false
                  }
                })
              }
              _this.setData({
                options: subRes.categoryVoList
              })

              // 根据标签获取筛选条件
              _this.getCate(subRes.categoryVoList[activeIndex].cateId).then(itemRes => {
                if (itemRes.categoryVoList && itemRes.categoryVoList.length) {
                  let activeNum = 0;
                  itemRes.categoryVoList.forEach((cate, index) => {
                    if (cate.itemCode === _this.data.subjectId) {
                      activeNum = index
                    }
                  })
                  _this.setData({
                    tabs: itemRes.categoryVoList,
                    tabActive: itemRes.categoryVoList[activeNum].cateId
                  })
                  _this.sendParentParams({
                    state: _this.data.phaseId,
                    subject: itemRes.categoryVoList[activeNum].itemName 
                  })
                }
              })
            }
          })
        }
      })
    },
    selectMenu(e) {
      const _this = this
      this.getCate(this.data.menus[e.detail.index].id).then(res => {
        if (res.categoryVoList && res.categoryVoList.length) {
          res.categoryVoList.forEach(cate => {
            cate.text = cate.itemName;
            cate.id = cate.cateId;
            cate.isChecked = false;
          })
          _this.setData({
            options: res.categoryVoList
          })
        }
      })
    },
    selectOption(e) {
      const _this = this
      const options = _this.data.options
      options.forEach(option => {
        option.isChecked = false
      })
      options[e.currentTarget.dataset.index].isChecked = true;
      this.setData({ phaseId: options[e.currentTarget.dataset.index].itemCode })
      console.log(options[e.currentTarget.dataset.index])
      _this.setData({
        options: options,
        showCondition: false,
        menuTitle: options[e.currentTarget.dataset.index].itemName,
        tabs: []
      })
      _this.getCate(this.data.options[e.currentTarget.dataset.index].cateId).then(res => {
        if (res.categoryVoList && res.categoryVoList.length) {
          _this.setData({
            options: options,
            tabs: res.categoryVoList,
            tabActive: res.categoryVoList[0].cateId
          })
        }
        _this.sendParentParams({ 
          state: options[e.currentTarget.dataset.index].itemCode,
          subject: res.categoryVoList[0].itemName
        })
      })
      _this.selectComponent('.mo-custom-dropdown-item').toggle(false)
    },
    changeTab(e) {
      this.sendParentParams({ 
        state: this.data.phaseId,
        subject: e.detail.title 
      })
    },
    getCate(id) {
      return new Promise(resolve => {
        findByPCateId({
          bizTypeEnum: this.data.params,
          pCateId: !id ? '' : id
        }).then(res => {
          resolve(res)
        })
      })
    },
    attachedFn: function() {
      const _this = this
      this.setData({
        menuArr: _this.data.params,
        menuActive: _this.data.params[0].children[0].text,
        tabActive: _this.data.tabArr[0].id
      })
    },
    goTo: function(event) {
      wx.navigateTo({
        url: event.currentTarget.dataset.url
      })
    },
    openDropdownItem() {
      const _this = this
      const query = wx.createSelectorQuery().in(this);
      query.select('#wrapperCondition').boundingClientRect()
      query.exec(function(res) {
        let distance = 0;
        const { windowHeight } = wx.getSystemInfoSync();
        const bottom = res[0].bottom - getApp().globalData.navHeight - 86;
        let item = _this.selectComponent('.mo-custom-dropdown-item')
        if (_this.properties.direction === 'down') {
          item.setData({
            wrapperStyle: 'z-index: 100; top: ' + bottom + 'px;' + 'transform: translateX(' + _this.properties.tranlateX + ')' 
          })
        } else {
          item.setData({
            wrapperStyle: 'z-index: 100; bottom: ' + (windowHeight - res[0].top) + 'px;' + 'transform: translateX(' + _this.properties.tranlateX + ')' 
          })
        }
        _this.triggerEvent('stopScroll')
      })
    },
    closeDropdownItem() {
      console.log(this.selectComponent('.mo-custom-dropdown-item'))
      this.triggerEvent('startScroll')
    },
    toggleSelect() {
      if (this.data.showCondition) {
        this.cancelSelectCondition()
      } else {
        this.selectCondition()
      }
    },
    selectCondition(e) {
      this.setData({
        showCondition: true
      })
    },
    cancelSelectCondition(e) {
      this.setData({
        showCondition: false
      })
    },
    selectConditionNav() {

    },
    checkCondition() {

    },
    sendParentParams(params) {
      this.triggerEvent('setCondition', params)
    }
  }
})
